import { Button } from 'antd'
import { useSelector, useDispatch } from 'react-redux'

import style from './style.module.scss'
import AreaItem from '../area-item'
import {
  getAddPageChildrenAction,
  getChangePageChildPositionAction
} from '../../store/action'
import { SortableContainer } from 'react-sortable-hoc'

const SortableList = SortableContainer(({ list }) => {
  return (
    <ul className={style.list}>
      {list.map((item, index) => (
        <AreaItem key={index} index={index} value={index} />
      ))}
    </ul>
  )
})

const AreaList = () => {
  const dispatch = useDispatch()
  const children = useSelector(
    (state) => state.homeManagement.schema?.children || []
  )
  const addPageChildren = () => {
    dispatch(getAddPageChildrenAction())
  }

  const onSortEnd = ({ oldIndex, newIndex }) => {
    dispatch(getChangePageChildPositionAction(oldIndex, newIndex))
  }

  return (
    <div>
      <SortableList
        distance={5}
        lockAxis="y"
        list={children}
        onSortEnd={onSortEnd}
      />
      <Button type="primary" ghost onClick={addPageChildren}>
        新增页面区块
      </Button>
    </div>
  )
}

export default AreaList
